<script setup lang="ts">
import { ClassChangeApi } from '@/apis'
import { useForm, useTable } from '@/hooks'
import ChangeList from '@/views/education/change/ChangeList.vue'

const route = useRoute()

const { form } = useForm<ClassChangeApi.ChangeRecordQuery>({
  studentId: undefined,
  grade: undefined,
  originalClassId: route.query.id as string,
  targetClassId: undefined,
  changeType: 'CHANGE_CLASS',
  operateSource: undefined,
  operateStatus: 'SUCCESS',
  startTime: undefined,
  endTime: undefined,
})

const {
  tableData: records,
  loading,
  pagination,
  search,
} = useTable(pagination => ClassChangeApi.getChangePage({ ...form, ...pagination }))

watch(form, () => search(), { immediate: true, deep: true })
</script>

<template>
  <ChangeList v-model:form="form" :records :loading :pagination @refresh="search" />
</template>

<style lang="less" scoped></style>
